<template>
	<view class="">
		<view class="flex-a">
			<uni-search-bar style="width: 90%;" @confirm="search" :focus="true" placeholder="请输入你的收货地址" v-model="searchValue" cancelButton="none" @input="input">
			</uni-search-bar>
			<view size="default"
				style="color:#000;" 
				hover-class="is-hover">搜索</view>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 30vh;" id="mapDom" :show-location="showLocationVisible"
					:latitude="latitude" :longitude="longitude" :markers="covers" @updated="lodingMap" @tap="tapUpdate">
				</map>
				<div @click="backPositionHandle" class="positionIcon"></div>
			</view>
		</view>
		<view class="footer">
			<view v-for="(item , index) in addressList" :key="index">
				<view @click="reciveLocation(item)">
					<uni-row>
						<uni-col :span="4">
							<image v-if="index==0" src="https://cxj.szzkba.cn/upload/i/2024/04/22/145305.png"
								style="width: 30px;height: 30px;">
							</image>
							<image v-else src="https://cxj.szzkba.cn/upload/i/2024/04/22/155306.png"
								style="width: 20px;height: 20px;">
							</image>
						</uni-col>
						<uni-col :span="20">
							<uni-row>
								<uni-col :span="20">
									<view v-if="index==0" style="color:#4297dd;font-weight: bold;font-size: 16px;">
										{{item.title}}
									</view>
									<view v-else style="font-weight: bold;font-size: 16px;">{{item.title}}</view>
								</uni-col>
								<uni-col :span="4">
									<view style="color:gray;text-align:right;font-size: 12px;">{{item._distance?item._distance+' m':''}}
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<view
									style="height: 30px;gray;margin: 10px 0;border-bottom: 1px solid lightgray;font-size: 12px;">
									{{item.address}}
								</view>
							</uni-row>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<!-- <button class="position" @click="getHereHandle">到这里</button> -->
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				key: '6AGBZ-LPWW5-3CMIE-IBUEM-5VLBF-KKBTX',
				showLocationVisible: true,
				latitude: 0,
				longitude: 0,
				addressList: [],
				covers: [{
					id: 1,
					width: 30,
					height: 30,
					latitude: 0,
					longitude: 0,
					iconPath: 'https://cxj.szzkba.cn/upload/i/2024/04/22/135128.png'
				}, ],
				city: '',
				flag: false
			}
		},
		onReady() {
			this.mapDom = uni.createMapContext('mapDom')
			// console.log(423, this.mapDom);
		},
		onLoad(option) {
			this.covers[0].latitude = Number(option.lat)
			this.covers[0].longitude = Number(option.lng)
			this.city = option.city
			this.address=uni.getStorageSync('address').split('市')[0]+'市'
			if(option.id){
				this.id=option.id
			}
			//  uni.getLocation 不触发直接将基础库调整为 2.17.0
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					this.latitude = Number(res.latitude)
					this.longitude = Number(res.longitude)
					// 获取位置成功之后进行缩放，直观的看到坐标
					// includePoints 缩放视野展示所有经纬度
					this.mapDom.includePoints({
						padding: [140, 50, 140, 50],
						points: [
							//我的位置
							{
								latitude: this.latitude,
								longitude: this.longitude
							}
						]
					})
				}
			});
		},
		methods: {
			reciveLocation(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/users/user_address/index?address='+e.address+'&id='+this.id
				});
			},
			input(res) {
				console.log('----input:', res)
				let that=this
				let searchURL =
					`https://apis.map.qq.com/ws/place/v1/suggestion?key=${that.key}&keyword=${that.address+res}`
				// console.log(searchURL)
				uni.request({
					url: searchURL,
					success: function(res) {
						console.log(res.data.data)
						that.addressList = res.data.data
					},
					fail: function(err) {
						console.error('获取位置信息失败', err);
					}
				});
			},
			tapUpdate(e) {
				let that = this
				that.showLocationVisible = false
				that.latitude = Number(e.target.latitude)
				that.longitude = Number(e.target.longitude)
				that.covers[0].latitude = that.latitude
				that.covers[0].longitude = that.longitude
				let searchURL =
					`https://apis.map.qq.com/ws/place/v1/search?key=${that.key}&boundary=nearby(${that.latitude},${that.longitude},500,0)&get_subpois=1`
				// console.log(searchURL)
				uni.request({
					url: searchURL,
					success: function(res) {
						that.addressList = res.data.data
						console.log(that.addressList);
					},
					fail: function(err) {
						console.error('获取位置信息失败', err);
					}
				});
			},
			// 地图初始化完成后触发
			lodingMap() {
				this.flag = true
			},
			getHereHandle() {
				if (!this.flag) return
				// let plugin = requirePlugin('routePlan');
				// let key = '2J4BZ-3CFEV-OYSPG-UDFGU-ONNNS-63FOT';  //使用在腾讯位置服务申请的key
				// let referer = 'navigateMap';   //调用插件的app的名称
				// let endPoint = JSON.stringify({  //终点
				//   'name': '北京西站',
				//   'latitude': 39.894806,
				//   'longitude': 116.321592
				// });
				// wx.navigateTo({
				//   url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				// });
				uni.openLocation({
					latitude: this.covers[0].latitude, //维度
					longitude: this.covers[0].longitude, //经度
					name: this.city, //目的地定位名称
					scale: 15, //缩放比例
					// address: "河南省鹤壁市浚县"    //导航详细地址
				})

			},
			backPositionHandle() {
				if (!this.flag) return
				this.mapDom.moveToLocation();
			}
		}
	}
</script>

<style>
	.page-section-gap {
		position: relative;
	}

	.footer {
		width: 100%;
		height: 25vh;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20upx 40upx 0 40upx;
		display: flex;
		flex-direction: column;
		border-radius: 22upx;
	}

	.position {
		height: 90upx;
		line-height: 90upx;
		background-color: #3d89f0;
		color: #fff;
		width: 100%;
	}

	.descriptive {
		font-size: 30upx;
		margin: 30upx 0 30upx 0;
	}

	.positionIcon {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		position: absolute;
		bottom: 40upx;
		right: 40upx;
		background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.fCPxTGJccQvVdqrNFqrMRwHaHa?pid=ImgDet&rs=1');
		background-size: 100% 100%;
	}
</style>